<template>
  <div>
    <div class="mindWidth labelTag">
      <span class="changeHanld" @click="handleClick('资质认定')">资质认定 {{ dataEs.maintainTotal || 0 }} 个</span>
      <span class="changeHanld" @click="handleClick('资金扶持')">资金扶持 {{ dataEs.helpTotal || 0 }} 个</span>
      <span
        class="changeHanld"
        @click="handleClick('补助金额')"
      >补助金额 {{ dataEs.honorProjectSubsidy || 0 }} 万</span>
    </div>
    <div class="mindWidth dataListTable" v-show="CurrentHonor.length">
      <div class="table_hd">
        <div class="table_hd_item1">项目名称</div>
        <div class="table_hd_item2">类别</div>
        <div class="table_hd_item3">年份</div>
        <div class="table_hd_item4">所有项目</div>
        <div class="table_hd_item5">补助资金</div>
      </div>
      <div
        class="table_bd"
        v-for="item in CurrentHonor"
        :key="item.id"
        v-show="CurrentHonor.length"
      >
        <div
          class="table_hd_item1_content singlerows changeHanld"
          @click="queryProject(item.projectName)"
        >{{ item.projectName }}</div>
        <div class="table_hd_item2_content singlerows">{{ item.projectType }}</div>
        <div class="table_hd_item3_content singlerows">{{ item.particularYear }}</div>
        <div class="table_hd_item4_content singlerows">{{ item.declarationName }}</div>
        <div class="table_hd_item5_content singlerows">{{ item.supportAmount }}</div>
      </div>
    </div>
    <!-- 没有数据的展示 -->
    <div class="table_bd_item" v-show="isLogin || dialogVisible || !CurrentHonor.length">
      <!-- 没有登录 -->
      <div class="noData" v-if="isLogin">
        <img src="../../static/image/noData.png" alt />
        您尚未登录
        <a @click="toLogin" style="font-weight: 600">立即登录</a>查看更多
      </div>
      <!-- 查询次数上限 -->
      <div class="noQueryData" v-else-if="dialogVisible">
        您的查询次数已满
        <a @click="toVIPPage">立即开通</a>会员
      </div>
      <div class="noData" v-else-if="!CurrentHonor.length && !isLogin">暂无数据</div>
    </div>

    <div class="mindWidth pageList">
      <div class="page">
        <paging ref="paging_zi" @CurrentPage="accept_CurrentValue" />
      </div>
    </div>
    <!-- 登录弹窗 -->
    <login-dialog ref="login" @reload="reload"></login-dialog>
  </div>
</template>

<script>
import paging from "@/components/paging.vue";
import { commonRequest } from "../../api/api.js";
import loginDialog from "../../components/login_item/LoginDialog";
export default {
  name: "honor",
  components: {
    paging,
    loginDialog
  },
  data() {
    return {
      CurrentHonor: [],
      currentPage: 1,
      dataEs: "",
      loading: false, // 添加loading
      isLogin: false, // 当没有登录时,不显示表格头
      dialogVisible: false, // 企业查询次数已满,不显示表格头
      type: "", // 查询类型
      id: this.$route.query.id || this.$route.params.id
    };
  },
  mounted() {
    this.getCurrentHonor();
    // console.log(this.$route);
  },
  methods: {
    toLogin() {
      this.$refs.login.open();
    },
    // 登录刷新当前页
    reload() {
      location.reload();
    },
    // 荣誉小项查询
    handleClick(val) {
      this.currentPage = 1;
      this.type = val;
      this.getCurrentHonor(val);
    },
    // 去升级vip页
    toVIPPage() {
      window.open("/pageVIP", "_balnk");
    },
    queryProject(val) {
      console.log(this.$store.state.honorAddress);
      let province = this.$store.state.honorAddress.province;
      let city = this.$store.state.honorAddress.city;
      let area = this.$store.state.honorAddress.area;
      window.open(
        `/policyPage?title=${val}&id=${this.$route.query.id}&province=${province}&city=${city}&area=${area}`
      );
    },
    accept_CurrentValue(value) {
      // console.log(value); // 当前的页数
      this.currentPage = value;
      this.getCurrentHonor(this.type);
    },
    // 获取荣誉信息
    getCurrentHonor(val) {
      let token = localStorage.getItem("saasToken");
      if (!token) {
        this.isLogin = true;
        return;
      }
      commonRequest("/api/cms/cmsHonorProject/list", {
        id: this.id,
        pageNo: this.currentPage,
        pageSize: 10,
        typeDesc: val
      }).then(res => {
        let { honorProjectPage } = res;
        if (res.code === 10001) {
          this.isLogin = true;
          return;
        } else if (res.code == 10005) {
          this.dialogVisible = true;
          return;
        } else {
          this.dataEs = res;
          this.CurrentHonor = honorProjectPage.records;
          this.$refs.paging_zi.totalValue(honorProjectPage.total);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .el-dialog__footer {
  height: 310px;
}

.labelTag {
  height: 60px;
  margin: 10px auto;
  display: flex;
  align-items: center;

  span {
    padding: 5px 8px;
    background: #e8f3ff;
    border-radius: 4px;
    font-size: 14px;
    color: #44a2ff;
    margin-right: 20px;
  }
}

.table_bd_item {
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;

  a {
    color: #2b89f8;
  }
}

.dataListTable {
  margin: 20px auto;
  min-height: 400px;

  .table_hd {
    display: flex;
    height: 60px;
    align-items: center;
    border: 1px solid #ccc;

    div {
      padding: 15px;
      border-right: 1px solid #ccc;
      font-size: 14px;
      height: 100%;
      background-color: #fff;
      font-weight: 700;
    }

    .table_hd_item1 {
      width: 460px;
    }

    .table_hd_item2 {
      width: 120px;
    }

    .table_hd_item3 {
      width: 100px;
    }

    .table_hd_item4 {
      width: 400px;
    }

    .table_hd_item5 {
      width: 120px;
      border-right: none;
    }
  }

  .table_bd {
    height: 60px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: none;

    div {
      padding: 20px;
      border-right: 1px solid #ccc;
      height: 59px;
      font-size: 14px;
    }

    .table_hd_item1_content {
      color: #2b89f8;
      width: 460px;
    }

    .table_hd_item2_content {
      width: 120px;
      min-height: 59px;
    }

    .table_hd_item3_content {
      width: 100px;
    }

    .table_hd_item4_content {
      width: 400px;
    }

    .table_hd_item5_content {
      width: 120px;
      border-right: none;
    }
  }
}

/* 这里是分页 */
.pageList {
  height: 100px;
  display: flex;
  flex-direction: row-reverse;
}

.page {
  display: flex;
  float: right;
  align-items: center;

  .pageNum {
    font-size: 14px;
    margin-right: 20px;

    span {
      color: #44a2ff;
      margin: 0 5px;
    }
  }

  .tempPage {
    margin-left: 10px;

    input {
      margin: 0 5px;
      text-align: center;
      width: 30px;
      height: 30px;
      border: 1px solid #ccc;
    }
  }
}
</style>
